@charset "UTF-8";
@import '../mixins/index.scss';
@import '../themes/default';

$componentPrefix: initPrefix();
$componentPrefixNoDot: initPrefix(
  $noDot: true,
);
$component: $componentPrefix;

/* css3 动画 不支持 nvue */
/* #ifndef APP-NVUE */
#{$component}transition-all {
  transition: all 0.2s ease-in 0s;
}

// mask popup
@keyframes #{$componentPrefixNoDot}fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#{$component}fade-in {
  animation: #{$componentPrefixNoDot}fade-in $ft-animation-duration ease-in forwards;
}

@keyframes #{$componentPrefixNoDot}fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#{$component}fade-out {
  animation: #{$componentPrefixNoDot}fade-out $ft-animation-duration ease-out forwards;
}

@keyframes #{$componentPrefixNoDot}top-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0px);
  }
}

#{$component}top-in {
  animation: #{$componentPrefixNoDot}top-in $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}top-out {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-1000px);
  }
}

#{$component}top-out {
  animation: #{$componentPrefixNoDot}top-out $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}bottom-in {
  0% {
    transform: translateY(600px);
  }
  100% {
    transform: translateY(0px);
  }
}

#{$component}bottom-in {
  animation: #{$componentPrefixNoDot}bottom-in $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}bottom-out {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(600px);
  }
}

#{$component}bottom-out {
  animation: #{$componentPrefixNoDot}bottom-out $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}left-in {
  0% {
    transform: translateX(-600px);
  }
  100% {
    transform: translateX(0px);
  }
}

#{$component}left-in {
  animation: #{$componentPrefixNoDot}left-in $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}left-out {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-600px);
  }
}

#{$component}left-out {
  animation: #{$componentPrefixNoDot}left-out $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}right-in {
  0% {
    transform: translateX(600px);
  }
  100% {
    transform: translateX(0px);
  }
}

#{$component}right-in {
  animation: #{$componentPrefixNoDot}right-in $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}right-out {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(600px);
  }
}

#{$component}right-out {
  animation: #{$componentPrefixNoDot}right-out $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}scale-in {
  0% {
    transform: scale(0.3, 0.3);
  }
  100% {
    transform: scale(1, 1);
  }
}

#{$component}scale-in {
  animation: #{$componentPrefixNoDot}scale-in $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}scale-out {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.3, 0.3);
  }
}

#{$component}scale-out {
  animation: #{$componentPrefixNoDot}scale-out $ft-animation-duration linear forwards;
}

@keyframes #{$componentPrefixNoDot}rotate360 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#{$component}rotate360 {
  animation: #{$componentPrefixNoDot}rotate360 $ft-rotate360-duration infinite linear;
}

/* #endif */
